<template>
	<view :data-theme="theme" class="container">
		<view class="card">
			<view class="header-top" style="position: relative;">
				<view class="header_name">【核心】{{activeData.activityName}}</view>
				<view class="main_color" style="font-size: 30rpx;">
					<!-- {{activeData.status | statusFilter}} -->
					{{activeData.status}}
				</view>
			</view>
			<view class="border-item">
				<view class="header-top" @click="activeIsShow" style="margin-top: 20rpx;line-height: 100rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">活动介绍</view>
					<u-icon :name="showUpClassPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
				</view>
				<view v-if="showUpClassPopup"
					style="color: #080808;line-height: 1.3;font-size: 30rpx;padding-bottom: 30rpx; "
					v-html="activeData.activityProfile">
				</view>
				
			</view>
			<view class="border-item">
				<view class="header-top" @click="infoIsShow" style="line-height: 90rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">活动信息</view>
					<u-icon :name="showUpInfoPopup?'arrow-up':'arrow-down'" size="14"></u-icon>
				</view>
				<view v-if="showUpInfoPopup" style="color: #080808;font-size: 29rpx;padding-bottom: 30rpx;color: #000;">
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							<em>截止时间</em>
						</view>
						<view style="flex: 3;">
							{{activeData.registrationDeadline}}
						</view>
					</view>
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							活动时间
						</view>
						<view style="flex: 3;">
							{{activeData.activityTime.slice(0, 10)}}-{{activeData.deadline.slice(0, 10)}}
						</view>
					</view>
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							审核状态
						</view>
						<view style="flex: 3;" v-if="activeData.activeData">
							需要审核
						</view>
						<view style="flex: 3;" v-else>
							无需审核
						</view>
					</view>
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							活动状态
						</view>
						<view style="flex: 3;" v-if="activeData.isShow">
							开启
						</view>
						<view style="flex: 3;" v-else>
							关闭
						</view>
					</view>
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;"v-if="!activeData.isShow">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							关闭原因
						</view>
						<view style="flex: 3;word-wrap: break-word; word-break: break-all;" >
							{{activeData.reason}}
						</view>
					</view>
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							活动范围
						</view>
						<view style="flex: 3;">
							{{activeData.activeCity}}
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="header-top" @click="requireIsShow"
					style="display: flex;justify-content: space-between;line-height: 90rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">报名要求</view>
					<u-icon :name="showUpRequirePopup?'arrow-up':'arrow-down'" size="14"></u-icon>
				</view>
				<view v-if="showUpRequirePopup"
					style="color: #080808;font-size: 29rpx;padding-bottom: 30rpx;color: #000;">
					<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
						<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
							活动要求
						</view>
						<view style="flex: 3;" v-html="activeData.activityRequirement">
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view>
				<view class="header-top" style="display: flex;justify-content: space-between;line-height: 90rpx;">
					<view style="font-size: 33rpx;font-weight: bold;">活动商品</view>
				</view>
				<view class="content-text">
					<!-- <u-tabs :list="tabList" :scrollable="true" :lineWidth="30" :lineColor="bgColor" :current="tabIndex"
						:activeStyle="{ color: '#000'}" :inactiveStyle="{color:'#4c4d51'}"></u-tabs> -->
					<uni-segmented-control :current="currentInd" :values="tabValue" inActiveColor="#000"
						:style-type="styleType" @clickItem="tabChangeClick" :active-color="bgColor" />
					<view style="margin-top: 16rpx;">
						<swiper class="tab-view" :duration="600" :current.sync="tabIndex">
							<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index"
								style="display: flex;">
								<scroll-view class="scroll-view" scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
									style="overflow: hidden;">
									<detail-product-page class="swiper-page" :currentInd="tabIndex" :bgColor="bgColor"
										:tab="tab" ref="tab" :ongoingProductList="propsData"
										:activityCategory="activityCategory" @toDetails="toDetails"
										@changeActive="changeActive"
										@deleteEnrolledPro="deleteEnrolledPro"></detail-product-page>
								</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view style="height: 110rpx;">

				</view>
			</view>
		</view>


		<view class="footer"
			style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;align-items: center;">
			<view style="flex: 1;">
				<button :color="bgColor" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="goAddProduct()">添加商品</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRegistrationAPi,
		deleteEnrolledProAPi
	} from "@/api/marketing.js";
	import detailProductPage from '../components/detail-product-page.vue';
	import {
		statusFilter,
		queryStatusFilter
	} from '../components/filter.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			detailProductPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				loadMoreStatus: 'noMore', //加载更多
				activeData: {
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "冻品尝鲜价04.17-04.30",
					status: 1, //活动状态
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					endTime: "2024.4.30 23:59:59",
					activeTime: "2024.4.17-2024.4.30",
					queryStatus: 1, //1直接生效
					activeCity: ' 嘉兴市,湖州,江门市,惠州市,成都,佛山,南区,芜湖市,深圳,广州,杭州,南京,绍兴,宁波马鞍山,合肥,无锡,上海,长沙,南宁,温州,常州,珠海,青岛,重庆,昆明,济南,贵阳,厦门,福州,北京,天津,东莞,武汉,郑州,苏一区,南昌,南通市,西安,台州市,泰州市,中山市,泉州市',
					requirements: '冻品尝鲜价专栏(冻肉、速食熟食、冷冻半成品、调理包)，限商品新客可享尝鲜价优惠价格，通过商城流量及首页固定栏目位高效转化新客!'
				},
				showUpClassPopup: false,
				tabValue: ['活动中', '未生效'],
				currentInd: 0,
				styleType: 'text',
				tabs: {},
				// -----------活动信息---------
				showUpInfoPopup: false,
				// -----------报名要求---------
				showUpRequirePopup: false,
				tabList: [{
					name: '活动中',
					type: 1,
				}, {
					name: '未生效',
					type: 2,
				}],
				tabIndex: 0,
				//--------------------
				ongoingProductList: [], //活动中商品列表
				closedProductList: [], //
				activityCategory: 0, //活动类型
				id: '',
				propsData: [], //给子组件传的值
			}
		},

		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			console.log(options)
			this.id = options.id;
			this.getRegistration(this.id);


		},
		// 过滤器
		filters: {
			statusFilter, // 活动状态
			queryStatusFilter
		},
		methods: {
			/* 
			获取活动详情 
			 */
			getRegistration(id) {
				let that = this;
				getRegistrationAPi(id).then((res) => {
					console.log(res)
					this.activeData = res.data;
					that.activityCategory = res.data.activityCategory;
					that.ongoingProductList = res.data.ongoingProductList;
					that.closedProductList = res.data.closedProductList;

					this.tabsChange();
				})
			},
			activeIsShow() {
				this.showUpClassPopup = !this.showUpClassPopup;
			},
			tabChangeClick(e) {
				// this.tabIndex = item.index;
				if (this.tabIndex !== e.currentIndex) {
					this.tabIndex = e.currentIndex
				};
				this.tabsChange();
			},
			tabsChange() {
				let that = this;
				if (that.tabIndex == 0) {
					that.propsData = that.ongoingProductList
				} else {
					that.propsData = that.closedProductList
				}
			},
			/* 取消活动 */
			deleteEnrolledPro(item) {
				let enrolledActivityId = item.enrolledActivityId;
				deleteEnrolledProAPi(enrolledActivityId).then((res) => {
					this.getRegistration(this.id);
					return uni.showToast({
						title: '取消成功',
						icon: 'success',
						duration: 2000 // 持续时间为 2 秒
					});
				})
				// .catch((err) => {

				// })
			},
			/** 
			活动信息
			 */
			infoIsShow() {
				this.showUpInfoPopup = !this.showUpInfoPopup;
			},
			/** 
			报名要求
			 */
			requireIsShow() {
				this.showUpRequirePopup = !this.showUpRequirePopup;
			},
			/* 添加商品 */
			goAddProduct() {
				let activityId = this.activeData.id;
				let actType = this.activeData.activityCategory;
				let data = {
					activityName:this.activeData.activityName,
				}
				this.goPage(`/pages/marketing/choosePeroduct/choosePeroduct?id=${activityId}&actType=${actType}`);
			},
			toDetails(item) {
				let tabIndex = this.tabIndex;
				let activityId = this.activeData.id;
				let enrolledActivityId  = item.enrolledActivityId ;
				let skuId = item.id;
				let activityCopey = this.activeData.activityCategory;
				this.goPage(`/pages/marketing/productDetail/productDetail?type=${tabIndex}`,
					(res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('productInfo', {
							activityId: activityId,
							enrolledActivityId :enrolledActivityId ,
							skuId:skuId,
							type: activityCopey,
						})
					});
			},
			
			changeActive(item) {
				let activityId = this.activeData.id;
				let skuId = item.id;
				this.goPage(`/pages/marketing/modifyActive/modifyActive?activityId=${activityId}&skuId=${skuId}`);
			},
			goPage(url,success) {
				uni.navigateTo({
					url,
					success:success
				});
			},
		}
	}
</script>

<style lang="scss" >
	// // #ifndef APP-PLUS */
	// page {
	// 	width: 100%;
	// 	min-height: 100%;
	// 	// display: flex;
	// }

	// /* #endif

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		// border: 1rpx solid $main-color-theme1;
		border: 1rpx solid;
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
	}

	.header_name {
		font-size: 31rpx;
		font-weight: bolder;
	}

	.border-item {
		border-bottom: 1px solid #f3f3f3;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 820rpx;

		.scroll-view {
			height: 100%;
		}
	}
</style>